<template>
  <div class="header-info">
    <div class="operation">
      <span>
        <el-icon><Message /></el-icon>
      </span>
      <span>
        <div class="dot"></div>
        <el-icon><ChatDotRound /></el-icon>
      </span>
      <span>
        <!-- <el-icon><Search /></el-icon> -->
        <el-icon @click="toggle">
          <component :is="isFullscreen ? 'Aim' : 'FullScreen'"></component>
        </el-icon>
      </span>
    </div>

    <div class="info">
      <el-dropdown>
        <span class="user-info">
          <el-image
            style="width: 30px; height: 30px; border-radius: 50%"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="fill"
          />
          <span class="name">{{ userInfo!.name }}</span>
        </span>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleExitClick">
              <el-icon><CircleClose /></el-icon>
              <span>退出系统</span>
            </el-dropdown-item>

            <el-dropdown-item divided>
              <el-icon><InfoFilled /></el-icon>
              <span>个人信息</span>
            </el-dropdown-item>

            <el-dropdown-item>
              <el-icon><Lock /></el-icon>
              <span>修改密码</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router'
  import { useFullscreen } from '@vueuse/core'
  import { LOGIN_TOKEN, CACHE_USERINFO, CACHE_USERMENUS } from '@/global/constant'
  import { localCache } from '@/utils/cache'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import useLoginStore from '@/store/login'
  import { storeToRefs } from 'pinia'

  const { isFullscreen, toggle } = useFullscreen()

  const $router = useRouter()
  const $route = useRoute()
  const loginStore = useLoginStore()
  const { userInfo } = storeToRefs(loginStore)

  function handleExitClick() {
    ElMessageBox.confirm('是否确定退出登陆', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      localCache.removeCache(LOGIN_TOKEN)
      localCache.removeCache(CACHE_USERINFO)
      localCache.removeCache(CACHE_USERMENUS)
      ElMessage.success('退出登陆成功')
      $router.push(`/login?redirect=${$route.path}`)
    })
  }
</script>

<style lang="scss" scoped>
  .header-info {
    display: flex;
    align-items: center;
    .operation {
      display: inline-flex;
      margin-right: 20px;
      span {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 35px;

        &:hover {
          background: #f2f2f2;
        }

        i {
          font-size: 20px;
        }

        .dot {
          position: absolute;
          top: 3px;
          right: 3px;
          z-index: 10;
          width: 6px;
          height: 6px;
          background: red;
          border-radius: 100%;
        }
      }
    }

    .info {
      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        .name {
          margin-left: 5px;
        }
      }

      // 清除移动到el-dropdown出现的outline样式
      :deep(.el-tooltip__trigger:focus-visible) {
        outline: unset;
      }

      // el-dropdown-menu__item 在app外部，因此使用global而不是用deep
      :global(.el-dropdown-menu__item) {
        // 正常不需要加:deep也可以选中这个类，因为这个类式这个组件的根元素的类（因为vue的特性，根组件的最外层的scoped id和上一层scoped id是相同的）
        // :deep(.el-dropdown-menu__item) {
        line-height: 36px !important;
        padding: 6px 22px;
      }
    }
  }
</style>
